<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="学学">
    <meta content="名称">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360用极速模式打开-->
    <meta name=renderer">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<link rel="stylesheet" href="css/louti.css"/>-->
    <script  type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <!--<script type="text/javascript" src="js/louti.js"></script>-->
    <title>天气预报</title>
    <style>
        *{padding:0;margin:0;list-style:none;}
        #bj{
            width:350px;
            height:550px;
            background: #7e55ff;
            background:url("1.img/tiankong3.png");
            margin:100px auto;
            border-radius:5px;
        }
        .box_1{
            width:100%;
            height:14%;
            /*background:yellow;*/
            text-align:center;
            padding-top:6%;
        }
        .box_1 p:nth-child(1){
            font-size:30px;

        }
        .box_2{
            width:90%;
            height:20%;
            /*background:green;*/
            font-size:50px;
            text-align:center;
            padding-left:10%;
        }

        .box_3{
            width:100%;
            height:5%;
            border-bottom:1px solid #9269ff;
        }
        .box_3 span:nth-child(1){
            margin-left:5px;
        }
        .box_3 span:nth-child(2){
            float:right;
        }
        .box_4{
            width:100%;
            height:19%;
            /*background: #d45eff;*/
        }
        .box_4 p{
            margin-left:5px;
        }
        .box_4 div ul li{
            list-style:none;
            float:left;
            margin:20px 22px;
        }
        .box_4 div ul li img{
            width:160%;
        }
        .box_5{
            width:100%;
            height:35%;
            /*background: #ff255b;*/
        }
        .box_5 .xx{
            width:20%;
            height:100%;
            float:left;
        }
        .box_5 .xx ul{
             border-left:1px solid #956bff;
         }
        .box_5 .xx ul li{
            margin-bottom:30px;
            text-align:center;

        }
        .box_5 .xx ul li:nth-child(1){
            font-size:8px;
        }
        .box_5 .xx ul li:nth-child(2){
            font-size:12px;
        }
        #mm{padding:5px 10px;letter-spacing:2px;}


    </style>
</head>
<body>
<div id="bj">
    <p id="mm"></p>
    <div class="box_1">
        <p id="city_m">绵阳市</p>
        <p id="city_l">瞬间多云</p>
    </div>
    <div class="box_2">72</div>
    <div class="box_3">
        <span id="box_3_f">星期四 今天</span>
        <span id="max_1">79°～ 64°</span>
    </div>
    <div class="box_4">
        <p>近日天气</p>
        <div id="tp">
            <ul>
                <li><img src="1.img/xiaoyu.png"   alt=""/></li>
                <li><img src="1.img/zhongyun.png" alt=""/></li>
                <li><img src="1.img/ying.png" alt=""/></li>
                <li><img src="1.img/duoyun.png" alt=""/></li>
                <li><img class="tq5" src="1.img/duoyunzhuanyin.png" alt=""/></li>
            </ul>
        </div>
    </div>
    <div class="box_5">
        <div class="xx">
            <ul style="border:none;">
                <li id="rq1">今天</li>
                <li id="qh1" class="qh">瞬间多云</li>
                <li id="wd1_1">29°</li>
                <li id="wd1_2" >39°</li>
            </ul>
        </div>
        <div class="xx">
            <ul>
                <li id="rq2">今天</li>
                <li id="qh2" class="qh">瞬间多云</li>
                <li id="wd2_1">29°</li>
                <li id="wd2_2" >39°</li>
            </ul>
        </div>
        <div class="xx">
            <ul>
                <li id="rq3">今天</li>
                <li id="qh3" class="qh">瞬间多云</li>
                <li id="wd3_1">29°</li>
                <li id="wd3_2" >39°</li>
            </ul>
        </div>
        <div class="xx">
            <ul>
                <li id="rq4">今天</li>
                <li id="qh4" class="qh">瞬间多云</li>
                <li id="wd4_1">29°</li>
                <li id="wd4_2" >39°</li>
            </ul>
        </div>
        <div class="xx">
            <ul>
                <li id="rq5">今天</li>
                <li id="qh5" class="qh">瞬间多云</li>
                <li id="wd5_1">29°</li>
                <li id="wd5_2" >39°</li>
            </ul>
        </div>

    </div>
</div>

<script>
    function test(){
        $.ajax({
            url:'https://api.heweather.com/x3/weather',
            type:"get",
            data:{                //发送到服务器的数据
                city:"绵阳",
                key:"d37ea0c46c134d20a445c273ce307474"},  //访问认证请求的密码
                dataType: 'json',               //数据类型
                success: function (res){         //请求成功后的回调函数
                 //alert("你好");
                    abc= "HeWeather data service 3.0";   //把这个存起来

                    //获得结果
                    $(".box_2").text(res[abc][0].now.tmp+"°");
                    $("#city_l").text(res[abc][0].now.cond.txt+" "+res[abc][0].now.wind.dir);
                    $("#max_1").text(res[abc][0].daily_forecast[1].tmp.min+"°～"+res[abc][0].daily_forecast[1].tmp.max+"°");
                   $("#box_3_f").text(res[abc][0].daily_forecast[1].cond.txt_d+"～"+res[abc][0].daily_forecast[1].cond.txt_n)
                    //第二天的天气与日期
                    $("#wd1_1").text(res[abc][0].daily_forecast[2].tmp.min+"°");
                    $("#wd1_2").text(res[abc][0].daily_forecast[2].tmp.max+"°");
                    $("#rq1").text(res[abc][0].daily_forecast[1].date );
                    $("#qh1").text(res[abc][0].daily_forecast[2].cond.txt_d+"～"+res[abc][0].daily_forecast[2].cond.txt_n)
                    //第三的天气与日期
                    $("#wd2_1").text(res[abc][0].daily_forecast[3].tmp.min+"°");
                    $("#wd2_2").text(res[abc][0].daily_forecast[3].tmp.max+"°");
                    $("#qh2").text(res[abc][0].daily_forecast[3].cond.txt_d+"～"+res[abc][0].daily_forecast[3].cond.txt_n)
                    $("#rq2").text(res[abc][0].daily_forecast[2].date );
                    //第四天的天气与日期
                    $("#wd3_1").text(res[abc][0].daily_forecast[4].tmp.min+"°");
                    $("#wd3_2").text(res[abc][0].daily_forecast[4].tmp.max+"°");
                    $("#qh3").text(res[abc][0].daily_forecast[4].cond.txt_d+"～"+res[abc][0].daily_forecast[4].cond.txt_n)
                    $("#rq3").text(res[abc][0].daily_forecast[3].date );
                    //第五天的天气与日期
                    $("#wd4_1").text(res[abc][0].daily_forecast[5].tmp.min+"°");
                    $("#wd4_2").text(res[abc][0].daily_forecast[5].tmp.max+"°");
                    $("#qh4").text(res[abc][0].daily_forecast[5].cond.txt_d+"～"+res[abc][0].daily_forecast[5].cond.txt_n);
                    $("#rq4").text(res[abc][0].daily_forecast[4].date );
                    //第六天的天气与日期
                    $("#wd5_1").text(res[abc][0].daily_forecast[6].tmp.min+"°");
                    $("#wd5_2").text(res[abc][0].daily_forecast[6].tmp.max+"°");
                    $("#qh5").text(res[abc][0].daily_forecast[6].cond.txt_d+"～"+res[abc][0].daily_forecast[6].cond.txt_n);
                    $("#rq5").text(res[abc][0].daily_forecast[5].date );
//                    for(i=2;i<7;i++){
//                        if(res[abc][0].daily_forecast[6].cond.txt_d+"～"+res[abc][0].daily_forecast[6].cond.txt_n=="阴"+"～"+"阴"){
//                            $("#tp ul li img").attr("src","1.img/yin.png");
//                    }
//                    }

                }
        })
    }
    test();



    //设置时钟
    function _time(){
        var a=new Date();
        var h=a.getHours();
        var m=a.getMinutes();
        var s=a.getSeconds();
        var time=h+":"+m+":"+s;
        var v= a.toLocaleDateString();//日期
        document.getElementById("mm").innerHTML=v+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+time;
    }
   _time();
    setInterval(_time,1000);


</script>

</body>
</html>
